<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>
<div id="app">
	<!--级联检索-->
	<el-form :model="searchForm" ref="searchForm" label-width="100px" label-position='left'
			 style="width: 90%;margin: auto;">
		<el-form-item label="姓名" prop="ename">
			<el-input v-model="searchForm.ename"></el-input>
		</el-form-item>
		<el-form-item label="入职时间">
			<el-col :span="11">
				<el-form-item prop="hireDate1">
					<el-date-picker type="date" placeholder="选择日期" value-format='yyyy-MM-dd'
									v-model="searchForm.hireDate1" style="width: 100%;"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col class="line" :span="2">-</el-col>
			<el-col :span="11">
				<el-form-item prop="hireDate2">
					<el-date-picker placeholder="选择日期" value-format='yyyy-MM-dd' type="date"
									v-model="searchForm.hireDate2" style="width: 100%;"></el-date-picker>
				</el-form-item>
			</el-col>
		</el-form-item>
		<el-form-item label="职位" prop="job">
			<el-checkbox-group v-model="searchForm.jobs">
				<el-checkbox :label="j" name="type" v-for='j in allJob'></el-checkbox>
			</el-checkbox-group>
		</el-form-item>

		<el-form-item label="是否在职" prop="delivery">
			<el-switch v-model="searchForm.state"></el-switch>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" icon="el-icon-search" @click="searchEmp(1)">开始搜索</el-button>
		</el-form-item>
	</el-form>
	<!--数据表格-->
	<el-table :data="result.list" border style="width: 90%;margin: auto;" @selection-change="changeSelection">
		<el-table-column type="selection" width="55">
		</el-table-column>
		<el-table-column fixed prop="empNo" label="编号" width="80">
		</el-table-column>
		<el-table-column prop="ename" label="姓名" width="100">
		</el-table-column>
		<el-table-column prop="job" label="job" width="120">
		</el-table-column>
		<el-table-column prop="mgrEmp.ename" label="上司姓名" width="100">
		</el-table-column>
		<el-table-column prop="hireDate" label="入职时间" width="140">
		</el-table-column>
		<el-table-column prop="sal" label="工资" width="80">
		</el-table-column>
		<el-table-column prop="comm" label="奖金" width="80">
		</el-table-column>
		<el-table-column prop="dept.dname" label="部门" width="120">
		</el-table-column>
		<el-table-column fixed="right" label="操作" width="300">
			<template slot="header" slot-scope="scope">
				<el-button type="success" @click="dialogSaveFormVisible=true">添加员工</el-button>
				<el-button type="danger" plain @click="removeBatch">删除选中员工</el-button>
			</template>
			<template slot-scope="scope">
				<el-button type="info" circle icon='el-icon-s-comment' @click='showEmp(scope.row)'></el-button>
				<el-button type="primary" circle icon='el-icon-edit'
						   @click="showUpdateEmp(scope.row)"></el-button>
				<el-button type="danger" circle icon="el-icon-delete"
						   @click="removeById(scope.row)"></el-button>
			</template>
		</el-table-column>
	</el-table>
	<div style="text-align: center;margin: auto;">
		<el-pagination background layout="total ,sizes ,prev, pager, next ,jumper" @size-change='changePageSize'
					   @current-change='chooseFind' :total="result.total">
		</el-pagination>
	</div>
	<!--添加的模态框-->
	<el-dialog title="添加员工" :visible.sync="dialogSaveFormVisible" center>
		<el-form :model="saveForm">
			<el-form-item label="姓名" label-width="120px">
				<el-input v-model="saveForm.ename" autocomplete="off" @blur="checkEnameExists"
						  style='width: 240px;'></el-input>
				<span :style="'color:'+ename_color+';'">{{ename_message}}</span>
			</el-form-item>
			<el-form-item label="职位" label-width="120px">
				<el-select v-model="saveForm.job" placeholder="请选择职位" style='width: 240px;'>
					<el-option v-for="j in allJob" :label="j" :value="j"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="上司" label-width="120px">
				<el-select v-model="saveForm.mgr" placeholder="请选择上司" style='width: 240px;'>
					<el-option v-for="m in allMgr" :label="m.ename" :value="m.empNo"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="工资" label-width="120px">
				<el-input v-model="saveForm.sal" autocomplete="off" style='width: 240px;'></el-input>
			</el-form-item>
			<el-form-item label="奖金" label-width="120px">
				<el-input v-model="saveForm.comm" autocomplete="off" style='width: 240px;'></el-input>
			</el-form-item>
			<el-form-item label="部门" label-width="120px">
				<el-select v-model="saveForm.deptNo" placeholder="请选择部门" style='width: 240px;'>
					<el-option v-for="d in allDept" :label="d.dname" :value="d.deptNo"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogSaveFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="save">确 定</el-button>
		</div>
	</el-dialog>

	<!--查看的模态框-->
	<el-dialog title="查看信息" :visible.sync="dialogShowFormVisible" center>
		<el-form :model="showForm">
			<el-descriptions title="员工信息">
				<el-descriptions-item label="员工名">{{showForm.ename}}</el-descriptions-item>
				<el-descriptions-item label="职位">{{showForm.job}}</el-descriptions-item>
				<el-descriptions-item label="上司姓名">
							<span v-if="showForm.mgrEmp.ename===null">
								没有上司
							</span>
					<span v-else>
								showForm.mgrEmp.ename
							</span>
				</el-descriptions-item>
				<el-descriptions-item label="入职时间">{{showForm.hireDate}}</el-descriptions-item>
				<el-descriptions-item label="工资">{{showForm.sal}}</el-descriptions-item>
				<el-descriptions-item label="奖金">{{showForm.comm}}</el-descriptions-item>
				<el-descriptions-item label="部门名">
					<el-tag size="small">{{showForm.dept.dname}}</el-tag>
				</el-descriptions-item>
			</el-descriptions>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogShowFormVisible = false">取 消</el-button>
			<el-button type="primary">确 定</el-button>
		</div>
	</el-dialog>

	<!--修改的抽屉-->
	<el-drawer title="修改员工信息" :visible.sync="drawerUpdateFormVisible" :direction="direction"
			   :before-close="handleDrawerClose">
		<el-form :model="updateForm">
			<el-form-item label="姓名" label-width="120px">
				<el-input v-model="updateForm.ename" autocomplete="off" style='width: 240px;'></el-input>
				<span :style="'color:'+ename_color+';'">{{ename_message}}</span>
			</el-form-item>
			<el-form-item label="职位" label-width="120px">
				<el-select v-model="updateForm.job" placeholder="请选择职位" style='width: 240px;'>
					<el-option v-for="j in allJob" :label="j" :value="j"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="上司" label-width="120px">
				<el-select v-model="updateForm.mgr" placeholder="请选择上司" style='width: 240px;'>
					<el-option v-for="m in allMgr" :label="m.ename" :value="m.empNo"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="工资" label-width="120px">
				<el-input v-model="updateForm.sal" autocomplete="off" style='width: 240px;'></el-input>
			</el-form-item>
			<el-form-item label="奖金" label-width="120px">
				<el-input v-model="updateForm.comm" autocomplete="off" style='width: 240px;'></el-input>
			</el-form-item>
			<el-form-item label="部门" label-width="120px">
				<el-select v-model="updateForm.deptNo" placeholder="请选择部门" style='width: 240px;'>
					<el-option v-for="d in allDept" :label="d.dname" :value="d.deptNo"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<div class="demo-drawer__footer" style="text-align: center;">
			<el-button @click="drawerUpdateFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="updateEmp">确 定</el-button>
		</div>
	</el-drawer>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				size: 10,
				result: {},
				selected_item: [],
				dialogSaveFormVisible: false,
				dialogShowFormVisible: false,
				drawerUpdateFormVisible: false,
				direction: 'rtl',
				saveForm: {
					ename: '',
					job: '',
					mgr: '',
					hireDate: "",
					sal: '',
					comm: '',
					deptNo: ''
				},
				showForm: {
					ename: '',
					job: '',
					mgr: '',
					hireDate: "",
					sal: '',
					comm: '',
					deptNo: '',
					mgrEmp: {
						ename: ''
					},
					dept: {
						dname: ''
					}
				},
				updateForm: {},
				allJob: [],
				allMgr: [],
				allDept: [],
				ename_message: '',
				ename_color: 'green',
				ename_flag: false,
				searchForm: {
					ename: '',
					jobs: [],
					hireDate1: '',
					hireDate2: '',
					state: false
				},
				chooseFlag: true
			}
		},
		methods: {
			loadEmpData(page) {
				console.log('loadEmpData:' + page)
				axios({
					url: 'http://localhost:8002/emp',
					params: {
						page: page,
						size: this.size
					}
				}).then(resp => {
					this.result = resp.data.data
				})
			},
			changePageSize(size) {
				this.size = size
				this.loadEmpData(this.result.pageNum)
			},
			loadJobData() {
				axios({
					url: 'http://localhost:8002/emp/find_job'
				}).then(resp => {
					this.allJob = resp.data.data
				})
			},
			loadMgrData() {
				axios({
					url: 'http://localhost:8002/emp/find_mgr'
				}).then(resp => {
					this.allMgr = resp.data.data
				})
			},
			loadDeptData() {
				axios({
					url: 'http://localhost:8002/dept'
				}).then(resp => {
					this.allDept = resp.data.data
				})
			},
			checkEnameExists() {
				if (this.saveForm.ename.trim() === '') {
					this.ename_message = '姓名不能为空'
					this.ename_color = 'red'
					this.ename_flag = false
					return
				}
				axios({
					url: 'http://localhost:8002/emp/find_ename_exists',
					params: {
						ename: this.saveForm.ename
					}
				}).then(resp => {
					if (!resp.data.success) {
						this.ename_message = resp.data.error
						this.ename_color = 'red'
						this.ename_flag = false
						return
					}
					this.ename_message = '姓名可以使用'
					this.ename_color = 'green'
					this.ename_flag = true
				})
			},
			save() {
				if (!this.ename_flag) {
					let _this = this
					this.$message({
						message: _this.ename_message,
						type: 'error'
					});
					return
				}
				let data = new URLSearchParams()
				data.append('ename', this.saveForm.ename)
				data.append('job', this.saveForm.job)
				data.append('mgr', this.saveForm.mgr)
				data.append('sal', this.saveForm.sal)
				data.append('comm', this.saveForm.comm)
				data.append('deptNo', this.saveForm.deptNo)
				axios({
					method: 'post',
					url: 'http://localhost:8002/emp',
					data: data
				}).then(resp => {
					if (!resp.data.success) {
						this.$message({
							message: resp.data.error,
							type: 'error'
						});
						return
					}
					this.dialogSaveFormVisible = false
					this.loadEmpData(this.result.pageNum)
					this.$message({
						message: '添加员工成功',
						type: 'success'
					});
				})
			},
			removeById(row) {
				this.$confirm('此操作将永久删除该员工【' + row.ename + '】, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// 用户点击了确定
					axios({
						method: 'delete',
						url: 'http://localhost:8002/emp',
						params: {
							id: row.empNo
						}
					}).then(resp => {
						if (!resp.data.success) {
							this.$message({
								type: 'error',
								message: resp.data.error
							});
							return
						}
						this.loadEmpData(this.result.pageNum)
						this.$message({
							type: 'success',
							message: '删除员工成功'
						});
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			changeSelection(selected_item) {
				this.selected_item = selected_item
				//console.log(this.selected_item)
			},
			removeBatch() {
				// 如果没有选中，提示你
				if (this.selected_item.length === 0) {
					this.$message({
						type: 'info',
						message: '请选中后删除'
					});
					return
				}


				this.$confirm('此操作将永久删除选中员工, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// 用户点击了确定
					let array = ''
					for (let i = 0; i < this.selected_item.length; i++) {
						// array.push(this.selected_item[i].empNo)
						array += this.selected_item[i].empNo + ','
					}
					array = array.substring(0, array.length - 1)
					console.log(array)
					axios({
						method: 'delete',
						url: 'http://localhost:8002/emp/remove_batch',
						params: {
							ids: array
						}
					}).then(resp => {
						if (!resp.data.success) {
							this.$message({
								type: 'error',
								message: '批量删除失败'
							});
							return
						}
						this.loadEmpData(1)
						this.$message({
							type: 'success',
							message: '批量删除成功'
						});
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			showEmp(row) {
				// 1.将数据赋予绑定的变量
				this.showForm = row
				console.log(this.showForm)
				console.log(this.showForm.mgrEmp)
				console.log(this.showForm.mgrEmp.ename)
				// 2.显示模态框
				this.dialogShowFormVisible = true
			},
			handleDrawerClose(done) {
				// 一会写询问
				this.$confirm('确认关闭？')
						.then(_ => {
							done();
						})
						.catch(_ => {});
			},
			showUpdateEmp(row) {
				// 1.展示内容
				this.updateForm = row
				// 2.显示抽屉
				this.drawerUpdateFormVisible = true
			},
			updateEmp() {
				let data = new URLSearchParams()
				data.append('ename', this.updateForm.ename)
				data.append('job', this.updateForm.job)
				data.append('mgr', this.updateForm.mgr)
				data.append('sal', this.updateForm.sal)
				data.append('comm', this.updateForm.comm)
				data.append('deptNo', this.updateForm.deptNo)
				data.append('empNo', this.updateForm.empNo)
				console.log(data)
				axios({
					method: 'put',
					url: 'http://localhost:8002/emp',
					data: data
				}).then(resp => {
					if (!resp.data.success) {
						this.$message({
							type: 'error',
							message: resp.data.error
						});
						return
					}
					this.loadEmpData(1)
					this.drawerUpdateFormVisible = false
					this.$message({
						type: 'success',
						message: '修改用户成功'
					});
				})
			},
			chooseFind(page) {
				console.log('chooseFind:' + page)
				if (this.chooseFlag) {
					this.loadEmpData(page)
				} else {
					this.searchEmp(page)
				}
			},
			searchEmp(page) {
				this.chooseFlag = false
				let data = new URLSearchParams()
				if (this.searchForm.ename !== '') {
					data.append('ename', this.searchForm.ename)
				}
				if (this.searchForm.hireDate1 !== '') {
					data.append('hireDate1', this.searchForm.hireDate1)
				}
				if (this.searchForm.hireDate2 !== '') {
					data.append('hireDate2', this.searchForm.hireDate2)
				}
				if (this.searchForm.jobs.length !== 0) {
					data.append('jobs', this.searchForm.jobs)
				}
				data.append('state', this.searchForm.state ? 1 : 0)
				data.append('page', page)
				data.append('size', this.size)
				axios({
					method: 'post',
					url: 'http://localhost:8002/emp/cascade',
					data: data
				}).then(resp => {
					this.result = resp.data.data
				})
			}
		},
		created() {
			this.loadEmpData(1)
			this.loadDeptData()
			this.loadJobData()
			this.loadMgrData()
		}
	})
</script>